<template>
	<view class="container">
		<view class="tui-searchbox">
			<view class="tui-search-input">
				<icon type="search" :size='13' color='#333'></icon>
				<input confirm-type="search" placeholder="输入你想搜的内容" :focus="true" auto-focus
					placeholder-class="tui-input-plholder" class="tui-input" v-model.trim="key" @input="inputKey" />
				<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon>
			</view>
			<view class="tui-cancle" @tap="back">取消</view>
		</view>

		<view class="tui-search-history" v-show="history.length>0 && !key">
			<view class="tui-history-header">
				<view class="tui-search-title">搜索历史</view>
				<tui-icon name="delete" :size='14' color='#333' @tap="openActionSheet"
					class="tui-icon-delete"></tui-icon>
			</view>
			<view class="tui-history-content">
				<block v-for="(item,index) in history" :key="index">
					<tui-tag margin="0 24rpx 24rpx 0" type="gray" shape="circle"
						@tap="selectItems(item)">{{item}}</tui-tag>
				</block>
			</view>
		</view>
		<view v-show="key">
			<view class="tui-header">
				<view class="tui-header-left tui-noboredr">搜索 “{{key}}”</view>
			</view>
			<view class="tui-result-box">
				<block v-for="(item,index) in searchList" :key="index">
					<view class="tui-result-item" hover-class="tui-opcity" :hover-stay-time="150">
						<rich-text :nodes="item.showKey"></rich-text>
					</view>
				</block>
			</view>
		</view>

		<!-- <view class="tui-search-hot">
			<view class="tui-hot-header">
				<view class="tui-search-title">大家正在搜</view>
			</view>
			<view class="tui-hot-content">
				<block v-for="(item,index) in hot" :key="index">
					<tui-tag type="gray" shape="circle">{{item}}</tui-tag>
				</block>
			</view>
		</view> -->
		<!--list-->
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item, index) in productList" :key="index" v-if="(index + 1) % 2 != 0 || isList">
					<!--商品列表-->
					<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover"
						:hover-start-time="150" @tap="detail(item.goods_id)">
						<image :src="item.pic_cover_mid" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"
							mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.goods_name }}</view>
							<view class="yui-tags" v-if="item.keywords">
								<view class="yui-tags-span">{{item.keywords}}</view>
							</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">
										<text class="yui-pro-price-sm">¥</text>
										{{ item.promotion_price }}

									</text>
									
						

								</view>

							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>

		</view>

		<!--加载loadding-->
		<tui-loadmore v-if="loadding" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn && isList" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
		<tui-actionsheet :show="showActionSheet" :tips="tips" @click="itemClick"
			@cancel="closeActionSheet"></tui-actionsheet>
	</view>

</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				history: [

				],
				hot: [

				],
				key: "",
				showActionSheet: false,
				tips: "确认清空搜索历史吗？",
				searchResult: [""],
				productList: [],
				isList: true, //是否以列表展示  | 列表或大图
				dropScreenH: 0, //下拉筛选框距顶部距离
				pageIndex: 1,
				loadding: false,
				starts: '***',
				pullUpOn: true,
				searchList: []
			}
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {

			}
			this.history = this.searchResult = this.tui.getKeywords() ? this.tui.getKeywords() : [];
		},
		onLoad(options) {
			if (options.key) {
				this.key = options.key;
				this.pageIndex = 1;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					search_text: this.key,
					sort: 'asc',
					page: this.pageIndex,
					limit: 10,
				};
				let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.productList = value.data.data;
							this.pageIndex++;
							this.loadding = true;
							// this.pullUpOn=false;
						}

					} else {}
				})

			}
		},
		methods: {
			back: function() {
				uni.navigateBack();
			},
			cleanKey: function() {
				this.key = ''
			},
			closeActionSheet: function() {
				this.showActionSheet = false
			},
			openActionSheet: function() {
				this.showActionSheet = true
			},
			itemClick: function(e) {
				let index = e.index;
				if (index == 0) {
					this.showActionSheet = false;
					this.history = [];
					this.tui.setKeywords('');
				}
			},
			detail: function(goods_id) {
				uni.navigateTo({
					url: '../productDetail/productDetail?goods_id=' + goods_id
				});
			},
			inputKey: function(e) {
				this.pageIndex=1;
				this.key = util.trim(e.detail.value);
				if (!this.key) {
					this.searchList = [];
					return;
				}
				//根据关键词查找
				let arr = []
				let keys = true;
				if (this.searchResult.length > 0) {
					this.searchResult.forEach((item) => {
						if (item == this.key) {
							keys = false
						}
					})
				}

				if (keys) {
					this.searchResult.push(this.key)
					this.tui.setKeywords(this.searchResult);
				}

				let token = this.tui.getToken();
				let datas = {
					token: token,
					search_text: this.key,
					sort: 'asc',
					page: this.pageIndex,
					limit: 10,
				};
				let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.productList = value.data.data;
							this.pageIndex = this.pageIndex + 1;
						}

					}
				})
				this.searchList = arr
			},
			selectItems: function(item) {
				this.key = item;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					search_text: this.key,
					sort: 'asc',
					page: this.pageIndex,
					limit: 10,
				};
				let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.productList = value.data.data;
							this.pageIndex = this.pageIndex + 1;
						}
					}
				})

			}
		},

		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;

			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			if (this.pageIndex == 1) {
				loadData = loadData.reverse();
			}
			let token = this.tui.getToken();
			let datas = {
				token: token,
				search_text: this.key,
				sort: 'asc',
				page: this.pageIndex,
				limit: 10,

			};
			let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
			Promise.resolve(result).then((value) => {
				if (value.code == 200) {
					if (value.data.data) {
						this.productList = this.productList.concat(value.data.data);
						this.pageIndex = this.pageIndex + 1;
						this.loadding = false;
					} else {
						this.loadding = false;
					}

				} else {
					this.tui.toast(value.message);
				}
			})


		}
	}
</script>

<style>
	page {
		color: #333;
		background: #fff;
	}

	.container {
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-searchbox {
		padding: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.yui-pro-price-sm {
		color: #f54100;
		font-size: 20rpx;
		font-weight: bold;
	}

	.yui-pro-point {
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #fff;
		padding: 4rpx 16rpx;
		background: #f00;
		margin-left: 10rpx;
	}

	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.yui-tags {
		height: 34rpx;
		display: flex;
	}

	.yui-tags-span {
		border-radius: 18rpx;
		background: #eff1f1;
		padding: 1rpx 12rpx;
		font-size: 20rpx;
		color: #a2a2a2;
		margin-right: 16rpx;
	}

	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}

	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}

	.tui-cancle {
		color: #888;
		font-size: 28rpx;
		padding-left: 30rpx;
		flex-shrink: 0;
	}

	.tui-history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.tui-history-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.tui-icon-delete {
		padding: 10rpx;
	}

	.tui-search-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.tui-hot-header {
		padding: 30rpx 0;
	}

	.tui-header {
		padding: 26rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-header-left {
		font-size: 30rpx;
		color: #222;
		border-left: 4rpx solid #EB0909;
		padding-left: 10rpx;
		word-break: break-all;
	}

	.tui-noboredr {
		border-left: 0 !important;
	}

	.tui-result-box {
		font-size: 28rpx;
	}

	.tui-result-item {
		line-height: 28rpx;
		padding: 28rpx 0;
	}

	/* 商品列表*/

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 40rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		/* margin-bottom: 1rpx !important; */
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 180rpx;
		height: 180rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 28rpx;
		font-weight: bold;
		color: #f54100;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	/* 商品列表*/
</style>